<template>
  <view v-if="screenWidth > 480" class="flex-shrink">
    <!-- <view class="bg-white" style="width: 100%; height: 460rpx;">
			<view class="__inner">
				<view class="flex" style="width: 100%; height: 100%;">
					<view class="my-4 flex flex-column align-center " style="width: 20%;">
						<view class="mb-2 flex justify-center" style="width: 100%;">
							<text class="font-md font-weight-bold">认证服务</text>
						</view>
						<view class="mb-2">
							<text class="font text-muted" @click="handleURL('/pages/login/register')">注册账户</text>
						</view>
						<view class="mb-2">
							<text class="font text-muted" @click="handleURL()">账户认证</text>
						</view>
					</view>
					<view class="my-4 flex flex-column align-center " style="width: 30%;">
						<view class="mb-2 flex justify-center" style="width: 100%;">
							<text class="font-md font-weight-bold">金融服务</text>
						</view>
						<view class="mb-2">
							<text class="font text-muted" @click="handleURL('/pages/finance/order-financing')">订单融资</text>
						</view>
						<view class="mb-2">
							<text class="font text-muted" @click="handleURL('/pages/finance/warehouse-pledge')">仓单质押</text>
						</view>
						<view class="mb-2">
							<text class="font text-muted" @click="handleURL('/pages/finance/factoring')">保付代理</text>
						</view>
					</view>
					<view class="my-4 flex flex-column align-center " style="width: 30%;">
						<view class="mb-2 flex justify-center" style="width: 100%;">
							<text class="font-md font-weight-bold">设计服务</text>
						</view>
						<view class="mb-2">
							<text class="font text-muted" @click="handleHerf('https://sbj.cnipa.gov.cn/sbj/index.html')">设计服务</text>
						</view>
						<view class="mb-2">
							<text class="font text-muted" @click="handleHerf('https://www.netconst.com/')">商标服务</text>
						</view>
					</view>
					<view class="my-4 flex flex-column align-center " style="width: 20%;">
						<view class="mb-2 flex justify-center" style="width: 100%;">
							<text class="font-md font-weight-bold">溯源管理</text>
						</view>
						<view class="mb-2">
							<text class="font text-muted" @click="handleHerf('https://digital.essc.top/dist/h5Test/baselarge/index.html')">溯源信息</text>
						</view>
						<view class="mb-2">
							<text class="font text-muted">隐私政策</text>
						</view>
						<view class="mb-2">
							<text class="font text-muted">规则说明</text>
						</view>
					</view>
				</view>
			</view>
		</view> -->
    <view v-if="Show" :class="bg" class="py-4">
      <view class="__inner py-4 bg-white">
        <view class="flex flex-column mx-4">
          <view class="pb-4">
            <text class="font-lg font-weight-bold">服务项目</text>
          </view>
          <view class="flex w-100" style="height: 300rpx">
            <view
              @click="handleDetail(item.url)"
              v-for="(item, index) in serviceType"
              :key="index"
              :class="index == 0 ? '' : 'ml-4'"
              class="w-100"
              style="cursor: pointer; position: relative"
            >
              <image
                style="width: 100%; height: 100%; position: absolute"
                :src="item.src"
                mode=""
              ></image>
              <view
                :class="item.isShow ? 'bg-black' : ''"
                class="flex justify-center align-center w-100"
                style="height: 100%; position: absolute"
              >
                <text
                  class="py-1 h3 text-white border-bottom border-white"
                  style="border-bottom-width: 5rpx"
                  >{{ item.value }}</text
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bg-dark" style="width: 100%; height: 150rpx">
      <view class="__inner flex flex-column justify-center align-center">
         <view class="font text-white">
			 <text>相关链接：</text>
			 <text class="WL hover" @click="WL('https://www.cast.org.cn/')"
			   >中国科学技术协会</text
			 >
			 <text class="WL hover" @click="WL('https://www.qianlima.com/')">
			   千里马招标网</text
			 >
		 </view>
        <text class="font text-white"
          >Copyright&copy; 2023-2024 版权所有:黑龙江长尾供应链服务有限公司</text
        >
        <text class="font text-white">
          <text class="WL">黑ICP备20230105623号-1</text>
        </text>
      </view>
    </view>
  </view>
  <!-- 移动端 -->
  <view v-else-if="screenWidth <= 480" class="flex-shrink">
    <view class="bg-white" style="width: 100%">
      <view class="">
        <view class="flex justify-between" style="width: 100%; height: 100%">
          <view class="my-4 flex flex-column align-center" style="width: 20%">
            <view class="mb-2 flex justify-center" style="width: 100%">
              <text class="font-md font-weight-bold">认证服务</text>
            </view>
            <view class="mb-2">
              <text class="font text-muted">注册账户</text>
            </view>
            <view class="mb-2">
              <text class="font text-muted">用户认证</text>
            </view>
          </view>
          <view class="my-4 flex flex-column align-center" style="width: 30%">
            <view class="mb-2 flex justify-center" style="width: 100%">
              <text class="font-md font-weight-bold">金融服务</text>
            </view>
            <view class="mb-2">
              <text class="font text-muted">订单融资</text>
            </view>
            <view class="mb-2">
              <text class="font text-muted">仓单质押</text>
            </view>
            <view class="mb-2">
              <text class="font text-muted">保付代理</text>
            </view>
          </view>
          <view class="my-4 flex flex-column align-center" style="width: 20%">
            <view class="mb-2 flex justify-center" style="width: 100%">
              <text class="font-md font-weight-bold">设计服务</text>
            </view>
            <view class="mb-2">
              <text class="font text-muted">设计服务</text>
            </view>
            <view class="mb-2">
              <text class="font text-muted">商标服务</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bg-grey" style="width: 100%; height: 80rpx">
      <view
        class="flex justify-center align-center"
        style="width: 100%; height: 100%"
      >
        <text class="font text-muted">&copy; 2023 木耳大宗交易平台</text>
      </view>
    </view>
  </view>
</template>

<script>
import { Message } from "element-ui";
const app = getApp();
export default {
  name: "yFooter",
  props: {
    screenWidth: {
      type: Number,
      default: 1200,
    },
    bg: {
      type: String,
      default: "bg-grey",
    },
    Show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      token: uni.getStorageSync("loginInfo").token,
      serviceType: [
        {
          value: "交易服务",
          src: "/static/icon/serve0.jpg",
          url: "/pages/backend/index",
          isShow: true,
        },
        {
          value: "溯源服务",
          src: "/static/icon/serve4.jpg",
          url: "https://digital.essc.top/dist/h5Test/baselarge/index.html",
          isShow: true,
          url: "/pages/index/Traceabilityinformation",
        },
        {
          value: "金融服务",
          src: "/static/icon/serve2.jpg",
          url: "/pages/index/financial",
          isShow: false,
        },
        {
          value: "其他服务",
          src: "/static/icon/serve3.jpg",
          url: "/pages/index/Othercertifications",
          isShow: false,
        },
      ],
    };
  },
  methods: {
    WL(url) {
      window.location.href = url;
    },
    handleURL(url) {
      uni.navigateTo({
        url,
      });
    },
    handleHerf(url) {
      window.location.href = url;
    },
    handleDetail(url) {
      if (url == "/pages/backend/index") {
        if (uni.getStorageSync("loginInfo") == "") {
          Message({
            type: "warning",
            message: "登录后可享受全部服务",
          });
		  let time = setTimeout(() => {
		  	uni.navigateTo({
		  		url: '/pages/login/login'
		  	})
		  	clearTimeout(time)
		  }, 2000)
          return;
        }
      }
      var reg = RegExp(/http/);
      if (reg.test(url)) {
        window.location.href = url;
      } else {
        uni.navigateTo({
          url,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.WL {
  display: inline-block;
  margin: 0 20rpx 0 0;
}

.hover {
  cursor: pointer;
}
.hover :hover {
  color: #28a745;
}
</style>